<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>操作dom</title>
    <style>
        body{
            color: blue;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div id="head" style="background: pink;">标题1</div>
        <div name="myName">标题2</div>
        <input name="myName">标题2</input>
        <ui class="ulItem">
            <li class="li-one">one</li>
            <li class="li-two">two</li>
            <li class="li-three">three</li>
        </ui>
    </div>

    <!-- 以下dom可以分为三个节点： -->
    <!-- 元素节点 div标签 -->
    <!-- style="xxx" 属性节点 -->
    <!-- 内容：文本节点 -->
    <div style="font-size: 12px">内容</div>

    <script>
        // 获取节点
        let head = document.getElementById("head")
        console.log(head)
        console.log(document.getElementsByName('myName'))
        console.log(document.getElementById("head").getAttribute('style'))
        head.setAttribute("style","height:40px;")
        let h3 = document.createElement('h3')
        let wrap = document.getElementsByClassName("wrap")[0]
        h3.innerHTML = 'h3'
        wrap.appendChild(h3)

        console.log(head.nextSibling)


    </script>
</body>

</html>